<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>订单管理</a-breadcrumb-item>
  </a-breadcrumb>

  <a-form layout="inline">
    <a-divider type="vertical" />

    <a-form-item label="订单编号">
      <a-input v-model:value="query.or_id">
        <template #prefix></template>
      </a-input>
    </a-form-item>

    <a-divider type="vertical" />

    <a-form-item>
      <a-button @click="getPage(1)" type="primary">查询</a-button>
    </a-form-item>
  </a-form>

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
  </a-table>
</template>
<script>
import { ref, reactive } from "vue";
import { get, put, post, tip, del } from "@/common";
export default {
  setup(props, { emit }) {
    const columns = [
      {
        dataIndex: "or_id", //服务端数据属性名
        title: "订单编号",
        align: "center",
      },
      {
        dataIndex: "od_id", //服务端数据属性名
        title: "标识码",
        align: "center",
      },
      {
        dataIndex: "br_id", //服务端数据属性名
        title: "分店编号",
        align: "center",
      },
      {
        dataIndex: "or_sum", //服务端数据属性名
        title: "订单总价",
        align: "center",
      },
      {
        dataIndex: "od_number", //服务端数据属性名
        title: "商品数量",
        align: "center",
      },
      {
        dataIndex: "od_price", //服务端数据属性名
        title: "单位商品价格",
        align: "center",
      },
    ];
    //分页处理-start
    const query = reactive({
      or_id: "",
      od_id: "",
      br_id: "",
      or_sum: "",
      od_number: "",
      od_price: "",
    }); //定义查询参数

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 2, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/sell/order", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面加载是，首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };

    //分页处理-end

    const viewDetails = (record) => {
      emit("toDetails", record);
    };
    return {
      columns,
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      viewDetails,
    };
  },
};
</script>
